/*
  学习目标：shouldComponentUpdate决定是否更新
 
*/ import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
    msg: 'hello React',
  };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  handleClickMsg = () => {
    this.setState({ msg: this.state.msg + '~' });
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <h1>msg {this.state.msg}</h1>
        <button onClick={this.handleClick}>点我修改数量</button>
        <button onClick={this.handleClickMsg}>点我修改msg</button>
        <Footer count={this.state.count}></Footer>
      </div>
    );
  }
}

class Footer extends React.Component {
  // 更新前
  // 通过返回true或false决定是否阻止更新
  shouldComponentUpdate(nextProps) {
    // 如果新的props.count更新了, 此时允许更新组件
    if (nextProps.count === this.props.count) return false;

    return true;
    // 如果新的props.count与旧的props.count值一样,不允许更细组件
  }

  // 更新中
  render() {
    console.log('render更新中  ----->  ');
    return <div>我是Footer - {this.props.count}</div>;
  }

  // 更新后
  componentDidUpdate() {
    console.log('componentDidUpdate更新后  ----->  ');
  }
}
